<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" buffer="16kb" session="false" autoFlush="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>反馈留言-www.uuola.com</title>
        <meta name="keywords" content="噢啦网,网址导航,网站导航,生活服务,美容,护肤,视频,游戏,购物,新闻,财经,社区,交友,旅游,热销,店铺"/>
        <meta name="description" content="噢啦网,网址导航,网站导航,生活服务,美容,护肤,视频,游戏,购物,新闻,财经,社区,交友,旅游,热销,店铺"/>
        <link rel="shortcut icon" href="http://cdn.uuola.cn/favicon.ico" type="image/x-icon" />
        <script type="text/javascript" src="${ctxpath}/inc/ctx.jsp"></script>
        <script type="text/javascript" src="http://cdn.uuola.cn/js/txbase.js"></script>
        <script type="text/javascript" src="http://cdn.uuola.cn/js/jq.autocomplete.js"></script>
        <script type="text/javascript" src="http://cdn.uuola.cn/index/js/index-min.js"></script>
        <script type="text/javascript" src="http://cdn.uuola.cn/js/formvalid.js"></script>
        <script type="text/javascript" src="http://cdn.uuola.cn/js/address.js"></script>
        <script type="text/javascript" src="http://cdn.uuola.cn/js/vimg.js"></script>
        <link rel="stylesheet" type="text/css" href="http://cdn.uuola.cn/css/index-min.css" charset="utf-8"/>
        <style type="text/css">
            #nav{text-align:left;font-size:14px;background:#ECF7FD;border-bottom:1px solid #B4DCF7;color:#1379BD;padding:4px 0px 4px 4px;}
            #nav a{color:#1379BD;}
            #navlink{clear:both;display:block;width:100%;}
            #navlink ul{border-bottom:1px solid #B4DCF7;display:inline-block;width:100%;padding:5px 0px 5px 0px;}
            #navlink ul li{float:left;display:inline-block;}
            #navlink ul li a{padding:9px 19px 9px 15px;font-size:14px;color:#0E5A84;}
            h2.ctname{text-align:left;padding:15px 0px 5px 0px;font-size:14px;font-weight:600;color:#1E91DC;clear:both;}
            
            .button {
                display: inline-block;
                zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
                *display: inline;
                vertical-align: baseline;
                margin: 0 2px;
                outline: none;
                cursor: pointer;
                text-align: center;
                text-decoration: none;
                font: 14px/100% Arial, Helvetica, sans-serif;
                font-weight:600;
                padding: .5em 2em .55em;
                _padding:5px 15px 5px;
                text-shadow: 0 1px 1px rgba(0,0,0,.3);
                -webkit-border-radius: .3em; 
                -moz-border-radius: .3em;
                border-radius: .3em;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
                box-shadow: 0 1px 2px rgba(0,0,0,.2);
            }
            .button:hover {
                text-decoration: none;
            }
            .button:active {
                position: relative;
                top: 1px;
            }
            .bigrounded {
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
            }
            .orange {
                color: #fff;
                border: solid 1px #da7c0c;
                background: #f78d1d;
                background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
                background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
            }
            .orange:hover {
                background: #f47c20;
                background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
                background: -moz-linear-gradient(top,  #f88e11,  #f06015);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
            }
            .orange:active {
                color: #fcd3a5;
                background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
                background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
                filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
            }


            /* error msg tips*/
            .err{color:#F37114;font-size:12px;text-align:left;}

            .center{text-align:center;clear:both;}
            #fb_box{width:670px;margin:auto;}
            #fb_box table{width:650px;height:420px;}
            #fb_box table tr{height:46px;}
            #fb_box table td{font-size:14px;padding-left:5px;height:46px; text-align:left}
            #fb_box .s1{
                height:22px;border: solid 1px #C7C7C7;
                background:url('http://img03.taobaocdn.com/imgextra/i3/152137799/T2QU15XkBaXXXXXXXX_!!152137799.png') #fff repeat-x;
                -webkit-border-radius: .3em; 
                -moz-border-radius: .3em;
                border-radius: .3em;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
                box-shadow: 0 1px 2px rgba(0,0,0,.1);
                width:200px;
                padding:3px;
                font-size:14px;
            }
            #fb_box textarea.s2{
                border: solid 1px #C7C7C7;
                -webkit-border-radius: .3em; 
                -moz-border-radius: .3em;
                border-radius: .3em;
                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
                box-shadow: 0 1px 2px rgba(0,0,0,.1);
                padding:3px;
                font-size:14px;  
            }
            #fb_box input.s1:hover,#fb_box textarea.s2:hover{border-color:#4BA9E6;background-color:#ffffff;}
            #fb_box input.s1:focus,#fb_box textarea.s2:focus{background-color:#ffffff;border-color:#3EA3E5;color:#1A7FC0;}
            span.red{color:red;}
            span.tip{color:#A7A7A7;font-size:12px;}
            h2.s3{padding:5px 0px 5px 19px;color:#ED8714;font-size:18px;}
            #codeimg{cursor:pointer;border:1px #E5E5E5 solid;}
        </style>
    </head>
    <body>
        <div id="topbar"><script type="text/javascript" src="http://cdn.uuola.cn/index/js/topbar.js" charset="utf-8"></script></div>
        <div id="page">
            <div id="pageMain" class="f">
                <div id="top"></div>
                <div id="search">
                    <div class="f trow" style="width:220px;padding-top:10px;">
                        <script type="text/javascript" src="http://cdn.uuola.cn/index/js/logo.js" charset="utf-8"></script>
                    </div>
                    <div class="f" id="sotab"><script type="text/javascript" src="http://cdn.uuola.cn/index/js/sobar.js" charset="utf-8"></script></div>
                </div>
                <div id="body" class="mt4">
                    <p id="nav"><a href="${ctxpath}/">导航首页</a>&gt;反馈留言</p>
                    <div id="fb_box">
                        <form id="fb_frm" name="fb_frm" action="" method="post" enctype="application/x-www-form-urlencoded" target="_top">
                            <table>
                                <tr>
                                    <td width="80" height="30" align="right">姓名/昵称：</td>
                                    <td colspan="4">
                                        <input type="text" name="nick" id="nick" tabindex="1" class="s1" maxlength="16"  valid="required" errmsg="怎么称呼你呢?"/>
                                        <span class="red">*</span>
                                        <select id="sex" name="sex" class="s1" style="width:90px;height:26px;">
                                            <option selected="selected" value="男">先生</option>
                                            <option value="女">女士</option>
                                        </select>
                                    </td>
                                    <td width="166"><div id="err_nick"></div></td>
                                </tr>
                                <tr>
                                    <td height="29" align="right">联系电话：</td>
                                    <td colspan="4">
                                        <input type="text" name="tel" id="tel" tabindex="2" class="s1" maxlength="20" valid="isTelephone" errmsg="电话号码或手机号格式错了."/>
                                        <span class="red"></span>
                                        <span class="tip">11位手机号</span>
                                    </td>
                                    <td><div id="err_tel"></div></td>
                                </tr>
                                <tr>
                                    <td height="29" align="right">邮 箱：</td>
                                    <td colspan="4">
                                        <input type="text" name="email" id="email" tabindex="3" class="s1" maxlength="60" valid="required|isEmail" errmsg="还没邮箱？|邮箱格式错误!"/>
                                        <span class="red">*</span>
                                        <span class="tip">推荐163,sohu,qq邮箱</span>
                                    </td>
                                    <td><div id="err_email"></div></td>
                                </tr>
                                <tr>
                                    <td height="29" align="right">地 区：</td>
                                    <td colspan="4">
                                        <select name="province" id="province" class="s1" style="width:110px;height:26px;"></select>
                                        <select name="city" id="city" class="s1" style="width:110px;height:26px;"></select>
                                        <select name="district" id="district" class="s1" style="width:110px;height:26px;"></select>
                                        <input type="hidden" id="cityarea" name="cityarea" value="" />
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td align="right">主 题：</td>
                                    <td colspan="4">
                                        <input type="text" name="title" id="title" tabindex="4" class="s1" maxlength="30" valid="required" errmsg="忘了填写反馈主题?"/>
                                        <span class="red">*</span>
                                        <span class="tip">30个字符,简单描述反馈主题</span>
                                    </td>
                                    <td><div id="err_title"></div></td>
                                </tr>
                                <tr>
                                    <td height="46" align="right">反馈内容：</td>
                                    <td colspan="4">
                                        <textarea name="msg" id="msg" cols="45" rows="5" tabindex="5" class="s2" valid="required|limit" min="2" max="500" errmsg="站长希望能收到您的建议.|内容字数请控制在500个字内."></textarea>
                                        <span class="red">*</span><br/>
                                        <span class="tip">限500个字,还不够表达心声？发邮件到 liuyan@uuola.com 告诉站长</a></span>
                                    </td>
                                    <td><div id="err_msg"></div></td>
                                </tr>
                                <tr>
                                    <td align="right">验 证 码：</td>
                                    <td width="125">
                                        <input type="text" name="vcode" id="vcode" tabindex="6" style="width:90px;" class="s1" onfocus="VIMG.reload('s');"  valid="required" errmsg="验证码不能为空哦."><span class="red">*</span></td>
                                    <td width="238" colspan="3"><img id="codeimg" src="http://cdn.uuola.cn/img/vcode.jpg" width="93" height="29" align="middle" onclick="VIMG.reload();" title="点击图片刷新校验码" alt="点击图片刷新校验码"/></td>
                                    <td><div id="err_vcode"></div></td>
                                </tr>
                                <tr>
                                    <td colspan="6"><p class="center"><input type="button" name="submitBtn" id="submitBtn" onclick="FB.submit();" value="提交反馈" class="button orange"></p></td>
                                </tr>
                            </table>

                        </form>
                    </div>
                </div> 
                <script type="text/javascript" src="http://cdn.uuola.cn/index/js/foot.js" charset="utf-8"></script>
            </div>
        </div>
        <script type="text/javascript">
            addressInit('province', 'city', 'district');
            VIMG.set(def.ctx+'/auth/code.srv');
            initValid(ut.e('fb_frm'));
            var FB={
                submit:function(){
                    var area = [$('#province').val(),$('#city').val(),$('#district').val()].join(' ');
                    $('#cityarea').val(area.indexOf('-')<0?area:'-');
                    var $rb=$('#submitBtn');
                    if(validator(ut.e('fb_frm'))){
                        $rb.attr('disabled','disabled');
                        $.post(def.ctx+'/feedback/save.shtm',$('#fb_frm').serialize(),function(x){
                            var r = $.trim(x);
                            if(r=='ok'){
                                alert('成功提交反馈信息.');
                                ut.reload('?t='+ut.r());
                            }else{
                                alert(r);
                                VIMG.reload();
                                $rb.removeAttr('disabled');
                            }
                        });
                    }
                }
            };
            jQuery(function() {
                $(".css-tabs:first").tabs(".css-panes:first > div",{effect:'ajax',initialIndex:0,history:true});
                $('#currso').load('${ctxpath}/index/so-tab1.html');
            });
        </script>
        <div style="display:none;"><script type="text/javascript" src="http://cdn.uuola.cn/js/trace.js"></script></div>
    </body>
</html>